<template>

    <el-collapse>
            <div style="margin: 0px;padding: 0px">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <span class="demonstration">日期范围</span>
                    <el-date-picker
                            v-model="searchForm.time"
                            type="datetimerange"
                            size="small"
                            format="yyyy 年 MM 月 dd 日 HH 小时 mm 分钟 ss 秒"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOption"
                            @change="dateFormat">
                    </el-date-picker>

                    <el-form-item>
                        <el-select v-model="searchForm.values" placeholder="店铺名">
                            <el-option v-for="branch in branchs" :label="branch.branchname" :value="branch.branchid"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchTime">搜索</el-button>
                        <el-button type="primary" @click="qkSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        <div>
            <div id="xltj" style="width: 100%;height:374px"></div>
        </div>
    </el-collapse>
    
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "statistics",
        data(){
            return {
                //所有店铺名
                branchs:[],
                num: 0,
                inprice: 0,
                sellprice: 0,
                //日期时间选择器
                value1: '',
                startTime: '',
                endTime: '',
                //动态查询数据
                searchForm: {
                    time:[],
                },
                // 自定义周期快捷选项
                pickerOption: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        })
                    }, {
                        text: '最近一个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        })
                    }, {
                        text: '最近三个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        })
                    }, {
                        text: '最近半年',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                            picker.$emit('pick', [start, end]);
                        })
                    }, {
                        text: '最近一年',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            picker.$emit('pick', [start, end]);
                        })
                    }],
                    //禁用当天之后的时间(若要禁用当天之前的时间则)
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },

                },
            }
        },
        //钩子函数  页面加载完毕后事件
        created(){
            this.txtjt();
            this.findName();
        },
        methods:{
            refresh(){
                window.location.reload()
            },
            searchTime(){
                this.txtjt();
            },
            //重置
            qkSearch(){
                this.refresh();
            },

            //查询店铺信息
            findName(){
                var token = sessionStorage.getItem("token")
                this.$http.get("/shoppingcar/shoppingTrolley/findBranName",token).then(result => {
                    this.branchs = result.data.data;
                })
            },

            dateFormat(picker) {
                if (picker != null) {
                    this.startTime = picker[0].toString();
                    this.endTime = picker[1].toString();
                }
            },
            txtjt(){
                this.$http.post("/shoppingcar/shoppingTrolley/dishesSales",this.searchForm).then(result =>{
                    console.log(result)
                    var array = result.data.data;
                    var name = array[0]
                    var num = array[1]

                    var chartDom = document.getElementById('xltj');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        xAxis: {
                            type: 'category',
                            data: name
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: num,
                                type: 'bar'
                            }
                        ]
                    };
                    option && myChart.setOption(option);

                })
            },
        }
    }
</script>

<style scoped>
    #num{
        margin-left: 100px;
    }
    .container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }
</style>